<template>
  <div class="app-container test_height_form">
    <!-- 拖拽导入区 -->
    <upload-excel-component
      class="excel-h"
      @on-selected-file="selected"
      @on-upload-start-file="uploadStart"
      @on-upload-end-file="uploadEnd"
      :disabled="importdisabled">

    </upload-excel-component>
    <a
      href="../../../static/data/execl/onwayImport.xlsx"
      download="onwayImport.xlsx"
    >
      <el-button
        class="filter-item"
        size="small"
        style="margin-left: 10px;margin-bottom: 20px"
        type="primary"
        v-waves
        icon="el-icon-upload2"
        :disabled="exportdisabled">
        导入示例模板下载
      </el-button>
    </a>

    <el-button
      class="filter-item"
      size="small"
      style="margin-left: 10px;margin-bottom: 20px"
      type="primary"
      v-waves
      icon="el-icon-upload2"
      :disabled="importdisabled"
      @click="importData"
    >导入
    </el-button>

    <el-popover
      placement="right"
      title="使用说明"
      width="250"
      trigger="hover">
      <div style="margin-left: 10px">
        <ol>
          <li>导入数据请小于5M</li>
          <li>选择或者拖入要导入的excle之后点击导入按钮</li>
          <li>重复使用暂时需要刷新页面</li>
        </ol>
      </div>
      <el-button slot="reference" type="success"   icon="el-icon-bell"></el-button>
    </el-popover>

    <div style="width: 100%;position: relative;">
      <v-loading v-if="fullscreenLoading"></v-loading>
      <el-table
        :key="tableKey"
        :data="tableData"
        border
        highlight-current-row
        fit
        element-loading-text="数据越多上传时间越久"
        style="width: 100%;"
        :height="table_height"
        class="app-h100">
        <el-table-column
          v-for="item of tableHeader"
          :prop="item"
          :label="item"
          :key="item"
          style="width: auto;"
        ></el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { importOnway } from '@/api/pay/otherExpenses'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import waves from '@/directive/waves'
import Loading from '@/components/loading/loading.vue'

export default {
  name: 'onwayImport',
  directives: {
    waves
  },
  components: { UploadExcelComponent, 'v-loading': Loading },
  mounted() {
    const that = this
    // 屏幕大小适配
    const app_h = document.getElementsByClassName('app-h100')[0].offsetHeight
    const cha = app_h - 360
    that.table_height = cha
    console.log('table', that.table_height)
  },
  data() {
    return {
      text: {
        header: [],
        row: []
      },
      tableData: [],
      tableHeader: [],
      fullscreenLoading: false,
      tableKey: 0,
      table_height: 0,
      importdisabled: true,
      tableloading: false,
      exportdisabled: false,
      tableData2: []
    }
  },
  methods: {
    selected(data) {
      this.fullscreenLoading = true
      if (this.fullscreenLoading) {
        this.importdisabled = false
      }
      console.log('excel-data', data)
      const filter = data.header.filter(str => !/KNOW/g.test(str))
      this.tableData = data.results
      this.tableHeader = filter
      this.fullscreenLoading = false
      console.log('ok')
      this.$notify({
        title: '解析完成',
        dangerouslyUseHTMLString: true,
        message:
            '已解析' + this.tableData.length + '条记录 <br/>请点击导入按钮',
        type: 'success',
        duration: 0
      })
    },
    uploadStart(val) {
      this.fullscreenLoading = val
      console.log('uploadStart-loding-true', this.fullscreenLoading)
    },
    uploadEnd(val) {
      this.fullscreenLoading = val
      console.log('uploadEnd-loding-false', this.fullscreenLoading)
    },
    importData() {
      const that = this
      this.fullscreenLoading = true
      this.importdisabled = true
      console.log('that.tableData', that.tableData)
      importOnway(that.tableHeader, that.tableData).then(result => {
        if (result.code === 0) {
          if (result.data !== null) {
            const updatedHeader = JSON.parse(result.data.header)
            const updatedRows = JSON.parse(result.data.rows)
            const rows_err = JSON.parse(result.data.rows_err)
            const rows_successed = JSON.parse(result.data.rows_successed)
            that.fullscreenLoading = true
            that.tableHeader = updatedHeader
            that.tableData = updatedRows

            if (rows_successed > 0) {
              this.$notify({
                title: '处理完成',
                dangerouslyUseHTMLString: true,
                message: '导入成功[' + rows_successed + ']条,失败[' + rows_err + ']条,<br/>失败数据详见表格',
                type: 'success',
                duration: 0
              })
            } else {
              that.$notify({
                title: '失败提示',
                message: '导入失败[' + rows_err + ']条',
                type: 'error',
                duration: 0
              })
            }
            that.fullscreenLoading = false
            that.importdisabled = false
          }
        } else {
          that.$notify({
            title: '信息提示',
            message: result.message,
            type: 'error',
            duration: 0
          })
          that.fullscreenLoading = false
          that.importdisabled = false
        }
      }).catch(error => {
        console.log('importOnwayError', error)
        that.fullscreenLoading = false
        that.importdisabled = false
      })
    }
  }
}
</script>

<style scoped>

</style>
